<template>
	<view class="container">
		<!-- 横向滑动Tabs -->
		<view class="page-foot">
			<Footer :identity="3" :footState="1"></Footer>
		</view>
		<scroll-view class="tabs-scroll" scroll-x="true" show-scrollbar="false" scroll-with-animation>
			<view class="tabs">
				<view v-for="(tab, i) in tabs" :key="tab.key" :class="['tab', currentTab === i ? 'active' : '']"
					@tap="switchTab(i)">
					{{ tab.name }}
				</view>
			</view>
		</scroll-view>

		<view v-if="filteredOrders.length === 0">
			<empty-data :tips="'暂无订单'" :lineHeight="500"></empty-data>
		</view>
		<view v-else class="orders-list">
			<view v-for="order in filteredOrders" :key="order.id" class="order-card"
				@tap="goDetail(order.id, order.goods.id)">
				<view class="order-head">
					<view class="order-course">{{ order.goods.goods_name }} {{ orderStatusTypeText(order.order_type) }}
					</view>
					<view v-if="currentTab != 4">
						<view :class="['order-status', 'status-' + order.order_status]">
							{{ orderStatusText(order.order_status) }}</view>
					</view>
					<view v-if="currentTab == 4">
						<view :class="['order-status', 'status-4']">
							{{ orderStatusText(11) }}</view>
					</view>
				</view>
				<view class="order-body">
					<view class="order-row">
						<text>{{ order.user.nickname }}</text>
						<text class="order-phone">{{ order.user.mobile }}</text>
					</view>
					<view class="order-row">
						<text>{{ order.shop.address }}</text>
					</view>
					<view class="order-row">
						<text>{{ order.pay_time }}</text>
					</view>
				</view>
				<view class="order-foot">
					<view class="order-no">订单号：{{ order.order_no }}</view>
					<view class="order-price">￥{{ order.pay_amount }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabs: [{
						name: '总订单',
						key: '0'
					}, // 全部订单
					{
						name: '未上课订单',
						key: '1'
					}, // 未上课订单
					{
						name: '已上课订单',
						key: '3'
					}, // 已上课订单
					{
						name: '已取消订单',
						key: '4'
					}, // 已取消订单
					{
						name: '已退费订单',
						key: '4'
					}, // 已取消订单
				],
				orders: []
			}
		},
		computed: {
			filteredOrders() {
				return this.orders; // No filtering needed, all orders are fetched based on the selected tab
			}
		},
		mounted() {
			this.fetchOrders(this.tabs[this.currentTab].key);
		},
		methods: {
			orderStatusText(status) {
				const statusMap = {
					0: '未支付',
					1: '待上课',
					2: '进行中',
					3: '已完成',
					4: '已取消',
					5: '已过期',
					6: '已评论',
					10: '在排队',
					11: '已退费'
				};
				return statusMap[status] || '';
			},
			orderStatusTypeText(status) {
				const statusMap = {
					1: '团课订单',
					2: '私教订单',
					3: '活动订单',
				};
				return statusMap[status] || ''; 
			},
			fetchOrders(status) {
				this.$http({
					url: '/addons/xilufitness/shop/getOrderList',
					params: {
						status
					} 
				}).then(res => {
					this.orders = res.data.list; 
				});
			},
			switchTab(i) {
				this.currentTab = i;
				this.fetchOrders(this.tabs[i].key); 
			},
			goDetail(id, goods_id) {
				uni.navigateTo({
					url: `/pages/shop_order_detail/shop_order_detail?id=${id}&goods_id=${goods_id}`
				});
			}
		}
	}
</script>
<style scoped>
	.container {
		background: #E8EEFE;
		min-height: 100vh;
		padding: 0 5vw;
	}

	.tabs-scroll {
		width: 100vw;
		padding-left: 5vw;
		margin-left: -5vw;
		background: #fff;
		/* 让scroll-view左右能超出padding，滑动更流畅 */
	}

	.tabs {
		display: flex;
		flex-direction: row;
	}

	.tab {
		padding: 24rpx 28rpx 14rpx 28rpx;
		font-size: 30rpx;
		color: #aaa;
		border-bottom: 3rpx solid transparent;
		margin-right: 24rpx;
		border-radius: 12rpx 12rpx 0 0;
		white-space: nowrap;
		/* 保证文字不换行 */
	}

	.tab.active {
		color: #FF6105;
		font-weight: bold;
		border-bottom: 3rpx solid #FF6105;
		background: #FFCF00;
	}

	.orders-list {
		margin-top: 36rpx;
	}

	.order-card {
		background: linear-gradient(135deg, #fff 65%, #fff 100%);
		border-radius: 28rpx;
		box-shadow: 0 8rpx 32rpx #0004;
		margin-bottom: 38rpx;
		padding: 38rpx 32rpx 28rpx 32rpx;
		transition: box-shadow 0.2s;
		position: relative;
		overflow: hidden;
	}

	.order-head {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		z-index: 2;
		position: relative;
	}

	.order-course {
		font-size: 34rpx;
		font-weight: 700;
		color: #ffcd38;
		flex: 1;
	}

	.order-status {
		font-size: 26rpx;
		border-radius: 20rpx;
		padding: 7rpx 24rpx;
		font-weight: 500;
		color: #333
	}

	.status-3 {
		background: #1c2e18;
		color: #95ec69;
	}

	.status-1 {
		background: #2a1a0a;
		color: #ffcd38;
	}

	.status-4 {
		background: #2c1c1c;
		color: #fa6464;
	}

	.status-11 {
		background: #1e2127;
		color: #54a8f5;
	}

	.order-body {
		margin-bottom: 12rpx;
		z-index: 2;
		position: relative;
	}

	.order-row {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 8rpx;
		color: #e7e7e7;
	}

	.order-row .iconfont {
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #ffcd38;
	}

	.order-phone {
		margin-left: 28rpx;
		color: #aaa;
	}

	.order-foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		padding-top: 14rpx;
		border-top: 1rpx solid #232323;
		color: #aaa;
		z-index: 2;
		position: relative;
	}

	.order-no {
		flex: 2;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.order-price {
		flex: 1;
		text-align: right;
		color: #ffcd38;
		font-size: 30rpx;
		font-weight: bold;
	}

	.empty {
		text-align: center;
		color: #666;
		padding: 100rpx 0 0 0;
		font-size: 30rpx;
	}

	.empty-img {
		width: 240rpx;
		margin-bottom: 32rpx;
		opacity: 0.7;
	}
</style>